<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>World码</title>
    <link rel="stylesheet" type="text/css" href="/css/webuploader.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/webuploader.min.js"></script>
    <script type="text/javascript" src="/js/uploader.js"></script>
    <style type="text/css">
        .table tbody tr td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        table {
            table-layout: fixed;
            word-break: break-all;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
<nav aria-label="...">
    <ul class="pager">
        <li class="next"><a href="http://127.0.0.1:8091/client">查看扫码情况 <span aria-hidden="true">&rarr;</span></a></li>
    </ul>
</nav>
<div class="container">
        <table class="table table-bordered">
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#activityMsg"
                    style="margin-bottom: 20px;margin-top: 20px">添加活动信息
            </button>
            <thead>
            <tr>
                <th style="width: 100px" class="text-center">编号</th>
                <th style="width: 250px" class="text-center">活动消息</th>
                <th style="width: 80px" class="text-center">消息类型</th>
                <th style="width: 80px" class="text-center">消息状态</th>
                <th style="width: 180px" class="text-center">添加时间</th>
                <th style="width: 60px" class="text-center">删除</th>
            </tr>
            </thead>
            <tbody id="ImgTextMsg">
            </tbody>
        </table>
    <div class="pull-right">
        <ul id='bp-3-element-sm-test'></ul>
    </div>
    <div class="modal fade" id="activityMsg" tabindex="-1" role="dialog" aria-labelledby="myActivityMsg"
         data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myActivityMsg">添加活动信息</h4>
                </div>
                <div class="modal-body">
                    <ul class="breadcrumb" role="tablist">
                        <li role="presentation" class="active"><a href="#textMsg" aria-controls="textMsg" role="tab"
                                                                  data-toggle="tab">文字消息</a></li>
                        <li role="presentation"><a href="#imgMsg" aria-controls="imgMsg" role="tab" data-toggle="tab">图片消息</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="textMsg">
                            <form>
                                <div class="form-group">
                        <textarea id="textActivityMsg" class="form-control" rows="6" style="resize:none"
                                  placeholder="请输入活动消息内容..."></textarea>
                                </div>
                                <button id="addTextMsg" type="button" class="btn btn-success">添加</button>
                            </form>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="imgMsg">

                            <div id="uploader">
                                <!--用来存放文件信息-->
                                <div id="thelist" class="uploader-list"></div>
                                <div class="btns">
                                    <div id="picker"
                                         style="display: inline-block;vertical-align: middle;margin: 0 70px 0 0;">选择图片
                                    </div>
                                    <button id="ctlBtn" class="btn btn-default" style="width: 86px;height: 40px">开始上传
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $().ready(function () {
            $("#addTextMsg").click(function () {
                var textActivityMsg = $("#textActivityMsg").val();
                if (jQuery.trim(textActivityMsg).length > 0) {
                    $.post("/manage/add_text_activity_msg", {"msg": "" + textActivityMsg + "", "type": "1"},
                        function (data) {
                            $('#activityMsg').modal('hide')
                            alert(data.msg)
                            $('#ImgTextMsg').html("<tr><td class=\"text-center\">" + data.data.id + "</td><td>" + data.data.msg + "</td><td class=\"text-center\">文字消息</td><td class=\"text-center\"><button type=\"button\" class=\"btn btn-success btn-xs msg-status\" value=\"1\">允许发送</button></td><td class=\"text-center\">最新发布</td><td class=\"text-center\"><button type=\"button\" class=\"btn btn-danger btn-xs delete_msg\" value=\""+data.data.id+"\">删除</button></td></tr>" + $('#ImgTextMsg').html());
                        }, "json");
                } else {
                    alert("需要输入活动消息内容")
                }
            });

            function get_activity_info() {
                $.getJSON("/manage/get_activity_info",
                    function (data) {
                        $.each(data.list, function (i, obj) {
                            var t
                            var s
                            if (obj.type == "1") {
                                t = "文字消息";
                            } else {
                                t = "图片消息";
                            }
                            if (obj.status == "1") {
                                s = "<button type=\"button\" class=\"btn btn-success btn-xs msg-status\" value=\"" + obj.status + "\">允许发送</button>";
                            } else {
                                s = "<button type=\"button\" class=\"btn btn-danger btn-xs msg-status\" value=\"" + obj.status + "\">禁止发送</button>";
                            }
                            $("#ImgTextMsg").append("<tr><td class=\"text-center\">" + obj.id + "</td><td>" + obj.msg + "</td><td class=\"text-center\">" + t + "</td><td class=\"text-center\">" + s + "</td><td class=\"text-center\">" + obj.createtime + "</td><td class=\"text-center\"><button type=\"button\" class=\"btn btn-danger btn-xs delete_msg\" value=\""+ obj.id+"\">删除</button></td></tr>");
                        });
                    });
            }

            get_activity_info();

            $("body").on("click", ".msg-status", function () {
                //获取被点击表格第0列数据
                var trh = $(this).closest("tr");
                var id = trh.find("td:eq(0)").text();
                var status = $(this).val();
                var tt = $(this);
                if (status == "1") {
                    tt.val(2);
                    $.post("/manage/update_msg_status", {"id": "" + id + "", "status": "2"},
                        function () {
                            tt.removeClass("btn-success");
                            tt.addClass("btn-danger");
                            tt.html("禁止发送")
                        }, "json");
                } else {
                    tt.val(1);
                    $.post("/manage/update_msg_status", {"id": "" + id + "", "status": "1"},
                        function () {
                            tt.removeClass("btn-danger");
                            tt.addClass("btn-success");
                            tt.html("允许发送")
                        }, "json");
                }
            });
            $("body").on("click", ".delete_msg", function () {
                var id = $(this).val();
                var tt = $(this);
                $.post("/manage/delete_activity_msg", {"activityMsgID": id},
                    function () {
                        tt.parents("tr").remove();
                    }, "json");
            });
        });
    </script>
</div>
</body>
</html>